import React, { Component } from "react";
import { Button } from "antd";
import "./index.less";

export default class RefundGoodsList extends Component {
  state = {
    list: [
      { order: "1111111111", name: "高级木椅1", state: 0 },
      { order: "1111111112", name: "高级木椅2", state: 1 },
      { order: "1111111113", name: "高级木椅3", state: 1 },
      { order: "1111111114", name: "高级木椅4", state: 0 },
      { order: "1111111115", name: "高级木椅5", state: 0 },
      { order: "1111111116", name: "高级木椅6", state: 1 }
    ]
  };
  render() {
    return (
      <div className="refund-goods-list">
        <div style={{ textAlign: "right" }}>
          <Button type="primary" className="sorting">
            按最近申请排序
          </Button>
          <Button>按临近超时排序</Button>
        </div>
        {/* 标题栏 */}
        <div className="list-title">
          <div style={{ width: "30%" }}>商品</div>
          <div>发货状态</div>
          <div>订单金额(元)</div>
          <div>退款金额(元)</div>
          <div className="half-width">申请时间</div>
          <div className="half-width">超时时间</div>
          <div>退款状态</div>
          <div className="operation" style={{ textAlign: "right" }}>
            操作
          </div>
        </div>
        {/* 列表 */}
        {this.state.list.map(item => {
          //   console.log(item.name);
          return (
            <div className="list-part" key={item.order}>
              {item.state === 0 ? (
                <div className="order-number">
                  订单号：{item.order}
                  <span className="instruct warn"></span> 退货退款
                </div>
              ) : (
                <div className="order-number">
                  订单号：{item.order}
                  <span className="instruct success"></span> 仅退款
                </div>
              )}

              <div className="info">
                <div style={{ width: "30%" }}>{item.name}</div>
                <div>已发货</div>
                <div>¥234</div>
                <div>¥345</div>
                <div className="half-width">2019-07-04 16:09:56</div>
                <div className="half-width">2019-07-04 16:09:56</div>
                <div>等待卖家发货</div>
                <div className="operation refund-oper">处理退款</div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}
